<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1{
				width: 400px;
				height: 400px;
				background-color: red;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
			#d2{
				width: 300px;
				height: 300px;
				background-color: blue;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
			#d3{
				width: 200px;
				height: 200px;
				background-color: mediumslateblue;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
			#d4{
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		</style>
	</head>
	<body>
		<div id="d1">
			<p align="center">第一个P标签</p>
			<div id="d2">
				<p align="center">第二个P标签</p>
				<div id="d3">
					<p align="center">第三个P标签</p>
					<div id="d4">
						<p align="center">第四个P标签</p>
					</div>
				</div>
			</div>
		</div>
		<button type="button" onclick="father()">点我查看father</button>
		<button type="button" onclick="son()">点我查看son</button>
	</body>
	<script type="text/javascript">
		function father(){
			console.log('1级父元素为：');
			console.log(document.getElementById('d4').parentElement);
			console.log('1级父节点为：');
			console.log(document.getElementById('d4').parentNode);
			console.log('2级父元素为：');
			console.log(document.getElementById('d4').parentElement.parentElement);
			console.log('2级父节点为：');
			console.log(document.getElementById('d4').parentNode.parentNode);
			console.log('3级父元素为：');
			console.log(document.getElementById('d4').parentElement.parentElement.parentElement);
			console.log('3级父节点为：');
			console.log(document.getElementById('d4').parentNode.parentNode.parentNode);
		}
		function son(){
			console.log('d1的子元素：');
			console.log(document.getElementById('d1').children);
			console.log('d1的子节点');
			console.log(document.getElementById('d1').childNodes);
			console.log('d2的子元素：');
			console.log(document.getElementById('d2').children);
			console.log('d2的子节点');
			console.log(document.getElementById('d2').childNodes);
			console.log('d3的子元素：');
			console.log(document.getElementById('d3').children);
			console.log('d3的子节点');
			console.log(document.getElementById('d3').childNodes);
			console.log('d4的子元素：');
			console.log(document.getElementById('d4').children);
			console.log('d4的子节点');
			console.log(document.getElementById('d4').childNodes);
		}
	</script>
</html>
